<template>
    <div class="feature_container_template">

        <div class="tip" v-show="!isShow">
            <el-col :lg="14" :xl="14" style="text-align: center">
                <el-button @click="clickFeatureShow" type="primary" class="showButton">
                    Start exploring our risk assessment tools!
                </el-button>
            </el-col>
        </div>

        <el-tabs v-model="activeName" @tab-click="handleClick" v-if="isShow">
            <el-tab-pane label="Fundraising Progress" name="Fundraising Progress" v-if="versionControl[0]">
                <feature1 height='400px' width='896px' id="feature1"></feature1>
            </el-tab-pane>
            <el-tab-pane label="Goal Structure" name="Goal Structure" v-if="versionControl[1]">
                <feature2 height='400px' width='896px' id="feature2"></feature2>
            </el-tab-pane>
            <el-tab-pane label="Fraudulency" name="Fraudulency" v-if="versionControl[2]">
                <feature3 height='500px' width='896px' id="feature3"></feature3>
            </el-tab-pane>
            <el-tab-pane label="Commenting Trend" name="Commenting Trend" v-if="versionControl[3]">
                <feature4 height='400px' width='896px' id="feature4"></feature4>
            </el-tab-pane>
            <el-tab-pane label="Interaction" name="Interaction" v-if="versionControl[4]">
                <feature5 height='400px' width='896px' id="feature5"></feature5>
            </el-tab-pane>
            <el-tab-pane label="Updating Trend" name="Updating Trend" v-if="versionControl[5]">
                <feature6 height='400px' width='896px' id="feature6"></feature6>
            </el-tab-pane>
            <el-tab-pane label="Historical Outcomes" name="Historical Outcomes" v-if="versionControl[6]">
                <feature7 height='400px' width='896px' id="feature7"></feature7>
            </el-tab-pane>
            <el-tab-pane label="Historical Communication" name="Historical Communication" v-if="versionControl[7]">
                <feature8 height='400px' width='896px' id="feature8"></feature8>
            </el-tab-pane>
            <el-tab-pane label="Industry Trends" name="Industry Trends" v-if="versionControl[8]">
                <feature9 height='400px' width='896px' id="feature9"></feature9>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import headTop from "components/header/head";
    import ProjectFeature from "./item/ProjectFeature";
    import {mapState, mapMutations} from "vuex";
    import {apiQueryPeakByCID} from "@/api/peak";
    import {apiQueryUserPeakByCID} from "@/api/user_peak";
    import {queryCampaignInfoByID} from "@/api/campaign";
    import {saveBookmark} from "@/api/bookmark";
    import {saveUserLog} from "@/api/log";

    import Feature1 from "@/components/Charts/feature1";
    import Feature2 from "@/components/Charts/feature2";
    import Feature3 from "@/components/Charts/feature3";
    import Feature4 from "@/components/Charts/feature4";
    import Feature5 from "@/components/Charts/feature5";
    import Feature6 from "@/components/Charts/feature6";
    import Feature7 from "@/components/Charts/feature7";
    import Feature8 from "@/components/Charts/feature8";
    import Feature9 from "@/components/Charts/feature9";


    import Constants from "@/env";

    import {getVersion} from '@/utils/auth'

    export default {
        data() {
            return {
                campaignId: "",
                activeName: "Fundraising Progress",
                versionControl: [],
                feature1Show: false,
                feature2Show: false,
                feature3Show: false,
                feature4Show: false,
                feature5Show: false,
                feature6Show: false,
                feature7Show: false,
                feature8Show: false,
                feature9Show: false,
                isShow: false
            };
        },

        components: {
            Feature1,
            Feature2,
            Feature3,
            Feature4,
            Feature5,
            Feature6,
            Feature7,
            Feature8,
            Feature9
        },

        computed: {
            ...mapState({
                userId: state => state.user.userId,
                userName: state => state.user.name,
            }),
            version() {
                return getVersion()
            }
        },

        methods: {
            clickFeatureShow() {
                this.isShow = !this.isShow
                var tip2 = {
                    operation: "Explore_tools",
                    params: JSON.stringify({
                        "user": this.userName,
                        "time": new Date().getTime(),
                        "campaignId": this.campaignId
                    })

                }
                saveUserLog(tip2);

            },
            handleClick(tab, event) {
                console.log(tab, event);

                var tip2 = {
                    operation: "Check_tool",
                    params: JSON.stringify({
                        "user": this.userName,
                        "time": new Date().getTime(),
                        "feature": tab.name,
                        "campaignId": this.campaignId
                    })

                }
                saveUserLog(tip2);

            },
            getUserNameById(userId) {
                var that = this;

                userId = userId || "";
                if ("" == userId) {
                    that.userName = "Anonymity";
                    return;
                }

                var that = this;
                this.$store
                    .dispatch("getUserName", userId)
                    .then(res => {
                        that.userName = res.userName;
                    })
                    .catch(err => {
                    });
            },
            initLoad() {
                var that = this;
            }
        },
        filters: {
            dateFormat(time) {
                return moment(time)
                    .startOf("mimute")
                    .fromNow();
            }
        },
        mounted() {
            /*console.log("绑定")
                    window.onYouTubeIframeAPIReady = function() {
                        console.log("onYouTubeIframeAPIReady")
                        alert("dd")
                    }
                    console.log("绑定")*/
            console.log("判断version")
            this.versionControl = window.versionMap[this.version]

            var totalControlListName = ["Fundraising Progress", "Goal Structure", "Fraudulency", "Commenting Trend",
                "Interaction", "Updating Trend", "Historical Outcomes", "Industry Trends"]

            for (var item in this.versionControl) {
                if (this.versionControl[item] > 0) {
                    this.activeName = totalControlListName[item]
                    break;
                }
            }


        },
        watch: {
            loadStatus(newValue, oldValue) {
                var that = this;
                if (true == newValue) {
                    setTimeout(function () {
                        that.initLoad();
                    }, 2000);
                }
            }
        }
    };
</script>

<style lang="scss">
    @import "../../style/mixin";

    .feature_container_template {
        background-color: white;
        position: relative;
        padding: 20px;
        width: 100%;
        min-height: 400px;

        .tip {
            margin-top: 200px;

            .showButton {
                font-size: 22px;

                span {
                    color: #011466;
                }
            }
        }
    }
</style>